<template>
	<view class="many-goods-list">
		<!-- 滑动效果 -->
		<!-- <scroll-view scroll-x="false" :scroll-into-view="'a' + cateIndex"> -->
		<!-- 取消滑动效果 -->
		<scroll-view >
			<view
				v-for="(item, index) in value.list"
				class="scroll-item"
				:class="{ active: index == cateIndex }"
				:id="'a' + index"
				:key="index"
				@click="changeCateIndex(item, index)"
			>
			
				<view class="item-wrap">
					<!-- 如果index>0显示竖线 -->
					<!-- <view class="split-line" v-if="index > 0"></view> -->
					<view class="cate" :class="[index == 0 ? 'diytitle' : 'diytitle1']" >
						<view class="name" :class="[index == 0 ? 'text' : 'text1']">
						{{ item.title }}
						
						</view>
						<view class="fire" v-if="index == 0">
						
							<img style="width: 40rpx;height: 45rpx;margin-top: 10rpx;" src="http://img.10gzs.com/upload/1/common/images/20221217/20221217023323167125880387048_SMALL.png" alt="">
						</view>
						<!-- <view class="desc" :class="{ 'color-base-bg': index == cateIndex && item.desc }">{{ item.desc }}</view> -->
					</view>
				</view>
			</view>
			<view class="line"></view>
		</scroll-view>
		<diy-goods-list v-if="goodsValue" :value="goodsValue" ref="diyGoodsList"></diy-goods-list>
	</view>
</template>

<script>
export default {
	name: 'diy-many-goods-list',
	props: {
		value: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			cateIndex: 0, // 当前选中的分类id
			goodsValue: null // 商品列表数据
		};
	},
	created() {
		this.changeCateIndex(this.value.list[0], 0, true);
	},
	methods: {
		changeCateIndex(item, index, isFirst) {
			this.cateIndex = index;
			this.goodsValue = {
				sources: item.sources,
				categoryId: item.categoryId,
				categoryName: item.categoryName,
				goodsId: item.goodsId,
				componentBgColor: this.value.componentBgColor,
				componentAngle: this.value.componentAngle,
				topAroundRadius: this.value.topAroundRadius,
				bottomAroundRadius: this.value.bottomAroundRadius,
				elementBgColor: this.value.elementBgColor,
				elementAngle: this.value.elementAngle,
				topElementAroundRadius: this.value.topElementAroundRadius,
				bottomElementAroundRadius: this.value.bottomElementAroundRadius,
				count: this.value.count,
				nameLineMode: this.value.nameLineMode,
				template: this.value.template,
				style: this.value.style,
				ornament: this.value.ornament,
				sortWay: this.value.sortWay,
				saleStyle: this.value.saleStyle,
				tag: this.value.tag,
				btnStyle: this.value.btnStyle,
				goodsNameStyle: this.value.goodsNameStyle,
				theme: this.value.theme,
				priceStyle: this.value.priceStyle,
				slideMode: this.value.slideMode,
				imgAroundRadius: this.value.imgAroundRadius,
				cartEvent: this.value.cartEvent
			};

			// 如果是第一次加载，不需要执行下面代码
			if (isFirst) return;
			this.$refs.diyGoodsList.goodsValue = this.goodsValue;
			this.$refs.diyGoodsList.getGoodsList();
		}
	}
};
</script>

<style lang="scss" scoped>
scroll-view {
	width: 100%;
	white-space: nowrap;
	box-sizing: border-box;
	padding: 10rpx 20rpx;
	
	.line {
		width: 100%;
		height: 20rpx;
		background-color: #FBEBE9;
		z-index: 999;
		position: absolute;
		top:80rpx;
	}
	.scroll-item {
		display: inline-block;
		text-align: center;
		vertical-align: top;

		.item-wrap {
			display: flex;
			align-items: center;
		}

		.split-line {
			display: inline-block;
			width: 1rpx;
			height: 30rpx;
			background-color: #e5e5e5;
			margin: 0 35rpx;
		}

		&.active {
			.name {
				font-weight: bold;
				color:#F4391c;
			}

			.desc {
				color: #ffffff;
				border-radius: 20rpx;
			}
		}

		.name {
			font-size: 32rpx;
			color: $color-title;
			line-height: 1;
		}

		.desc {
			font-size: $font-size-tag;
			color: $color-tip;
			height: 36rpx;
			line-height: 36rpx;
			margin-top: 10rpx;
			min-width: 120rpx;
			max-width: 220rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			padding: 0 10rpx;
		}
		.diytitle {
			z-index: 99;
		    width: 220rpx;
		    border: 50px solid;
		    border-right: 30px solid;
		    border-left: 24px solid;
		    border-color: #FBEBE9;
		    position: relative;
			border-top: none;
			border-right-color: transparent;
			border-radius: 20rpx 0rpx;
			
		}
		.text {
			position: absolute;
			top:28rpx;
			left:-15rpx;
			font-size: 36rpx;
		}
		.fire {
			position: absolute;
			top:12rpx;
			right: 0rpx;
		}
		.diytitle1{
			width: 180rpx;
			z-index:98;
			position: relative;
			right: 45rpx;
			padding-top:60rpx ;
			padding-right: 20rpx;
			background:  linear-gradient(
			    to bottom,
			    white 0%,
			    white 30%,
			    #FDF6E3 30%,
			    #FDF6E3 100%
			  );
		}
		.text1 {
			position: relative;
			top:-12rpx;
			left: 20rpx;
			font-size: 26rpx;
		}
	}
}
</style>
